<template>
    <div>
        <el-form :inline="true" label-width="90px">
            <el-form-item :label="tool.label" v-for="(tool, index) in toolData" :key="index">
                <el-input
                    v-if="tool.el == 'input'"
                    clearable
                    v-model="query[tool.model]"
                    class="filter-item"
                    style="width: 200px;"
                    placeholder="请输入"/>
                <el-date-picker
                    v-else-if="tool.el == 'date-picker'"
                    v-model="query[tool.model]"
                    :type="tool.type"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"/>
                <!-- <el-select
                    v-else-if="tool.el == 'select'"
                    clearable
                    v-model="query[tool.model]"
                    placeholder="请选择"
                    style="width: 200px;">
                    <el-option v-for="item in tool.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
                </el-select> -->
            </el-form-item>
            <el-button class="filter-item" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
        </el-form>
    </div>
</template>
<script>
export default {
  name: "gToolBar",
  props: {
    toolData: Array,
    query: Object
  },
  methods: {
    search() {
      this.$emit("search");
    }
  }
};
</script>
